@import '~styles/colors.less';

.content {
  position: absolute;
  top: 30px;
  bottom: 0px;
  left: 0;
  right: 0;
}

.actions {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  border-bottom: 1px solid @chromeBordersColor;
  margin: 0;
}

.template, .subComponent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  border-bottom: 1px solid @chromeBordersColor;
  text-align: center;
  line-height: 30px;
  font-size: 11px;
  text-transform: uppercase;
}

.template {
  color: @linkColor;
}

.subComponent {
  color: @chromeTextColor;
}

.action {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  text-decoration: none;
  width: 50%;
  margin: 0;
  border-right: 1px solid @chromeBordersColor;

  :global {
    i, span {
      display: inline-block;
      line-height: 30px;
      color: @chromeTextColor;
    }
    span {
      font-size: 10px;
    }
    i {
      font-size: 9px;
      margin-right: 6px;
    }
  }

  &:last-child {
    border-right: 0;
  }

  &:hover {
    :global {
      i, span {
        color: @primary;
      }
    }
  }
}
